<template>
  <view class="container">
	  <view class="title-h1">环保监督——网格员端</view>
    <!-- 登录表单 -->
    <view class="form-card">
      <view class="cu-form-group margin-top">
        <input v-model="login.adminCode" class="cu-input round" placeholder="登录编码" />
      </view>
      <view class="cu-form-group">
        <input v-model="login.passWord" class="cu-input round" type="password" placeholder="密码" />
      </view>
      <button class="cu-btn block bg-blue margin-top round shadow-blur" @click="handleLogin">登录</button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      login: {
        adminCode: '',
        passWord: ''
      }
    }
  },
  methods: {
    handleLogin() {
		if (this.login.adminCode == '') {
			uni.showToast({
				title: '请输入编码',
				icon: 'none',
				duration: 2000
			});
		} else if (this.login.passWord == '') {
			uni.showToast({
				title: '请输入密码',
				icon: 'none',
				duration: 2000
			});
		} else {
			uni.request({
				url: 'http://localhost:8086/checkCode',
				method: 'POST',
				header: {
					'Content-Type': 'application/json' 
				},
				data: this.login,
				success: (res) => {
					if (res.data.code === 200) {
						console.log('登录成功');
						const Uid = this.login.adminCode;
						uni.setStorageSync('id', Uid);
						uni.navigateTo({
							url:'/pages/test/test'
						})
					} else if (res.data.code === 400 && res.data.message==='密码错误') {
						uni.showToast({
							title: '密码错误',
							icon: 'none',
							duration: 2000
						});
					} else  {
						uni.showToast({
							title: '用户不存在',
							icon: 'none',
							duration: 2000
						});
					}
				},
			});
		}
      
    }
  }
}
</script>

<style>
.title-h1 {
  font-size: 24px;
  color: #333;
  text-align: center;
  margin-bottom: 10px;  /* 下边距，使得标题与内容有一定间距 */
}

.title-h2 {
  font-size: 18px;
  color: #555;
  text-align: center;
  margin-bottom: 20px;  /* 下边距，使得小标题与内容有一定间距 */
}

.container {
  padding: 20px;
  /* background-color: #55ff00; */
  background-image: url(/static/jdzy.jpg);
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.form-card {
  width: 90%;
  max-width: 400px;
  background-color: white;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.cu-form-group {
  margin-bottom: 20px;
}

.margin-top {
  margin-top: 20px;
}

.round {
  border-radius: 20px;
}

.shadow-blur {
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
}

.text-center {
  text-align: center;
  margin-top: 15px;
}

.link-text {
  color: #1cbbb4;
  font-size: 14px;
}
</style>
